import React, { memo, useState } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
// import { PlusOutlined } from "@ant-design/icons";
import { Form, Input, Button, Select, message, Modal } from "antd";
import { Pubblogwrap } from "./style";
import { current } from "@/utils/timeutil";
import request from "@/service/request";
import { getblogtypeactionasync } from "../store/actioncreater";
import qs from "qs";
import Uploadyzh from "@/components/uploadyzh";

const { Option } = Select;
export default memo(function Pubblog() {
  let { blogtype, user } = useSelector(
    (store) => ({
      blogtype: store.newhomestore.blogtype,
      user: store.userstore.user,
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  const [imageUrl, setImageUrl] = useState("");
  //添加博客分类是否显示
  const [typeshow, settypeShow] = useState(false);
  //用来清空发表博客的表单
  const [form1] = Form.useForm();
  //用来清空添加博客类别的表单
  const [form2] = Form.useForm();
  //获取从自定义组件回传的url
  const setimg = (imgurl) => {
    setImageUrl(imgurl);
  };
  //发表博客
  const onFinish = (values) => {
    delete values.confirm;
    //这里必须要手动设置图片路径,否则会面临c://fakepath//问题
    values.pic = imageUrl;
    values.bloggerid = user.id;
    values.releaseDate = current();
    values.clickHit = 0;
    values.replyHit = 0;

    if (user.pubblog) {
      request
        .post("travel/Addblog", qs.stringify(values))
        .then((res) => {
          message.success("发表博客成功");
          form1.resetFields();
          setImageUrl("");
        })
        .catch((err) => {
          console.log("添加博客接口出错");
        });
    } else {
      message.error("你不能发表博客");
    }
  };
  //添加博客分类
  const onFinish2 = (values) => {
    const f = { typeName: values.typeName };
    request
      .post("travel/Addtype", qs.stringify(f))
      .then((res) => {
        message.success("添加博客类别成功");
        form2.resetFields();
        dispatch(getblogtypeactionasync());
      })
      .catch((err) => {
        message.error("添加博客类别失败");
      });
    settypeShow(false);
  };
  return (
    <Pubblogwrap>
      {/* 添加博客分类窗口 */}
      <Modal
        title="添加博客分类"
        visible={typeshow}
        onCancel={(e) => settypeShow(false)}
        footer={[]}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish2}
          form={form2}
          autoComplete="off"
        >
          <Form.Item
            label="博客类别"
            name="typeName"
            rules={[{ required: true, message: "请输入博客类别" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              添加分类
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Form
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
        form={form1}
      >
        <Form.Item
          label="标题"
          name="title"
          rules={[{ required: true, message: "请自拟标题" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="typeId"
          label="博客类别"
          rules={[{ required: true, message: "请选择博客类别" }]}
        >
          <Select placeholder="请选择博客类别">
            {blogtype.map((item, index) => {
              return (
                <Option key={index} value={item.id}>
                  {item.typeName}
                </Option>
              );
            })}
          </Select>
        </Form.Item>

        <Form.Item
          name="summary"
          label="博客内容"
          rules={[{ required: true, message: "请输入博客内容" }]}
        >
          <Input.TextArea showCount maxLength={500} />
        </Form.Item>

        <Form.Item
          name="pic"
          label="封面"
          rules={[
            {
              required: true,
              message: "请选择博客的封面",
            },
          ]}
        >
          <div className="upload">
            <Uploadyzh setimg={setimg}></Uploadyzh>
          </div>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            发表博客
          </Button>
        </Form.Item>
      </Form>
      <div
        className="addtype"
        onClick={(e) => {
          settypeShow(true);
        }}
      >
        添加博客分类
      </div>
    </Pubblogwrap>
  );
});
